<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css 变量</title>
</head>
<body>
<style>
    :root {
        --borderstyle: solid;
    }

    .divs {
        --foo: blue;
        --bar: #000;
        --fontsize: 26px;
        --padding: 10px 20px 30px 40px;
    }

    a {
        --foo: yellow;
        --color: red;
    }

    .divBlock {
        width: 100px;
        height: 100px;
        background: var(--fooa, red);
    }

    .divBlock2 {
        width: 100px;
        height: 100px;
        background: var(--foo);
        font-size: var(--fontsize);
    }

    .divBlock3 {
        width: 100px;
        height: 100px;
        background: var(--foo);
        padding: var(--padding);
        overflow: hidden;
    }

    .divBlock4 {
        width: 100px;
        height: 100px;
        background: var(--foo);
        overflow: hidden;
        border: 2px var(--borderstyle) var(--bar);
    }

    .aBlock {
        width: 100px;
        height: 100px;
        display: block;
        background: var(--foo);
        color: var(--color);
    }
</style>
<div class="divs">
    <div class="divBlock">来自fooa的css变量未申明，默认red</div>
    <div class="divBlock2">字体大小来自css变量</div>
    <div class="divBlock3">来自padding的padding，第二个参数不处理内部的逗号或空格，都视作参数的一部分。</div>
    <div class="divBlock4">border来自全局root和divs的样式</div>
</div>
<a class="aBlock">用于来自范围a的css背景和字体颜色</a>


<style>
    :root {
        --color: blue;
    }

    div {
        --color: green;
    }

    #alert {
        --color: red;
    }

    * {
        color: var(--color);
    }
</style>

<p>蓝色</p>
<div id="alert">红色</div>
<div>绿色</div>


<script>
    function m1({x = 0, y = 0}={}) {
        return [x, y];
    }

    function m2({x, y}={x: 0, y: 0}) {
        return [x, y];
    }


    var o={

    }
</script>


</body>
</html>